<template>
	<view class="box">
		<view slot="top">
			<u-navbar height="50" title="订单详情" title-color="#333" title-size="36">
			</u-navbar>
		</view>
		<!-- 到店信息 -->
		<view class="arrivalInfo">
			<view class="title">
				<span v-if="type==0">待付款</span>
				<span v-if="type==1">待提货</span>
				<span v-if="type==2">待付款</span>
				<span v-if="type==3">待付款</span>
			</view>
			<view class="ctBox">
				<view class="titleInfo">
					到店信息
				</view>
				<view class="user ct">
					<span>使用人:</span><span>赵先生 13340137033</span>
				</view>
				<view class="shopName ct">
					<span>商家店:</span><span>南明区花果园大街烟酒店</span>
				</view>
				<view class="addressInfo">
					<span class="dwIcon"></span> <text class="text">贵州省贵阳市南明区花果园大街</text> <span
						class="openDtIcon"></span>
				</view>
				<!-- 待提货 -->
				<view class="codeBox" v-if="type==1">
					<view class="title">
						提货核销券码
					</view>
					<view class="code">
						647364
					</view>
					<view class="codePic">
						<image src="/static/codes.png" mode="widthFix" style="width: 300rpx;height: 300rpx;"></image>
					</view>
					<view class="notice">
						为防被盗用，请不要随意将您的信息随便透露给陌生人
					</view>
				</view>
				<!-- 待评价 -->
				<view class="codeBox" v-if="type==2" style="opacity: 0.5;">
					<view class="title">
						提货核销券码
					</view>
					<view class="code" style="text-decoration: line-through;">
						647364
					</view>
					<view class="codePic">
						<image src="/static/codes.png" mode="widthFix" style="width: 300rpx;height: 300rpx;"></image>
					</view>
					<view class="notice">
						为防被盗用，请不要随意将您的信息随便透露给陌生人
					</view>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="shopInfo">
			<view class="title">
				商品信息
			</view>
			<view class="ctBox">
				<view class="left">
					<image src="/static/avatar.jpg" mode="widthFix" style="width: 160rpx; height: 160rpx;"></image>
				</view>
				<view class="right">
					<view class="name">
						产品名称
					</view>
					<view class="type">
						<span>规格</span> <span>x10</span>
					</view>
					<view class="price">
						￥69.80
					</view>
				</view>
			</view>
			<view class="totalPrice">
				<span>商品总价</span> <span>￥698.00</span>
			</view>
			<view class="totalPrice">
				<span>优惠券抵扣</span> <span>-￥0.00</span>
			</view>
			<view class="confirmPrice">
				<span>￥698.00</span> <span>合计：</span> <span>共一件</span>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderInfo">
			<view class="title">
				订单信息
			</view>
			<view class="number ct">
				订单编号：2022092800001
			</view>
			<view class="createTime ct">
				创建时间：2023-09-28 10:345:46
			</view>
			<view class="createTime ct" v-if="type!==0">
				支付时间：2023-09-28 10:345:46
			</view>
			<view class="remark ct" v-if="type!==0">
				订单类型：到店自提
			</view>
			<view class="remark ct">
				订单备注：无
			</view>

		</view>
		<!-- 按钮 待付款-->
		<view class="btns" v-if="type==0">
			<view class="instant">
				立即支付
			</view>
			<view class="cancel">
				取消订单
			</view>
		</view>
		<!-- 按钮 待提货-->
		<view class="btns" v-if="type==1">
			<view class="realtaions">
				联系商家
			</view>
		</view>
		<!-- 按钮 待付款-->
		<view class="btns" v-if="type==2">
			<view class="commit" @click="()=>this.show=true">
				评价
			</view>
			<view class="realtaions">
				联系商家
			</view>
		</view>
		<view class="hhh" style="height: 100rpx;">

		</view>
		<u-popup v-model="show" mode="bottom" height="900" :closeable="true" close-icon-pos="top-left"
			border-radius="28">
			<view class="popCommit">
				<view class="titles">
					发表评论
				</view>
				<view class="rates">
					<view class="rateTitle">
						商品评价
					</view>
					<view class="reateSelet">
						<u-rate count="count" current="2" @change="changeRate" active-color="#ffaa33"
							size="50"></u-rate>
					</view>
					<view class="rateCt">
						{{selectCt}}
					</view>
				</view>
				<view class="commentCt">
					<view class="title">
						评论内容<span style="color: #999999;">(至少15字以上)</span>
					</view>
					<view class="Ct">
						<textarea v-model="commentCt" placeholder="商品满足您的期待吗？说说它的优点和美中不足吧。" />
					</view>
					<view class="pic">
						图片 <span style="color: #999;">(0/3)</span>
					</view>
					<view class="picS">
						<view class="item items" v-for="(item,index) in images" :key="index">
							<image style="width: 200rpx;height: 200rpx;" :src="item" mode="widthFix"></image>
						</view>
						<view class="item">
							<image src="/static/photo.png" mode="widthFix" style="width: 80rpx;height: 80rpx;display: block;margin: 60rpx auto;"></image>
						</view>
					</view>
				</view>
				<view class="submitBtn">
					提交评价
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 2,
				show: false,
				//评分
				count: 5,
				reatCt: ["很差", "差", "一般", "好", "非常好"],
				selectCt: "一般",
				commentCt: '',
				images:[]
			}
		},
		onLoad(res) {
			console.log(res);
		},
		methods: {
			changeRate(value) {
				console.log(value, this.count);
				this.selectCt = this.reatCt[value - 1]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
	}

	//到店信息
	.arrivalInfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 20rpx auto;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.title {

			font-size: 42rpx;
		}

		.ctBox .titleInfo {
			margin-top: 20rpx;
			font-size: 30rpx;
		}

		.ctBox .ct {
			margin-top: 10rpx;
			font-size: 28rpx;
		}

		.ctBox .addressInfo {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			justify-content: space-between;

			.text {
				width: 594rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.openDtIcon {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				background-image: url('/static/dhd.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

			.dwIcon {
				display: inline-block;
				width: 20rpx;
				height: 24rpx;
				background-image: url('/static/location2.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

		}

		.codeBox {
			padding: 20rpx 0;
			border-top: 1rpx solid #E6E6E6;
			text-align: center;

			.title {
				font-size: 28rpx;
				padding: 10rpx 0;
			}

			.code {
				font-size: 60rpx;
				padding: 10rpx 0;
			}

			.codePic {
				width: 300rpx;
				height: 300rpx;
				margin: 10rpx auto;
			}

			.notice {
				font-size: 24rpx;
				padding: 10rpx 0;
				color: #D3BA5B;
			}
		}
	}

	//商品信息
	.shopInfo {
		width: 710rpx;
		height: 536rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 20rpx auto;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.title {
			font-size: 30rpx;
		}

		.ctBox {
			display: flex;
			justify-content: space-between;
			padding: 0 0 20rpx 0;
			border-bottom: 1px solid #F0F1F2;
			margin-top: 30rpx;

			.left {
				width: 160rpx;
				height: 160rpx;
			}

			.right {
				width: 500rpx;
				height: 160rpx;

			}

			.right .name {
				font-size: 26rpx;
				width: 500rpx;
				height: 53rpx;
				line-height: 53rpx;
			}

			.right .type {
				display: flex;
				width: 500rpx;
				justify-content: space-between;
				height: 53rpx;
				line-height: 53rpx;
				color: #999999;
			}

			.right .price {
				width: 500rpx;
				font-size: 30rpx;
				color: #FA453C;
				height: 53rpx;
				line-height: 53rpx;
			}

		}

		.totalPrice {
			width: 670rpx;
			padding: 20rpx 0;
			display: flex;
			font-size: 28rpx;
			border-bottom: 1px solid #F0F1F2;
		}

		.confirmPrice {
			display: flex;
			padding: 20rpx 0;
			flex-direction: row-reverse;

			span {
				margin: 0 8rpx;
			}
		}

	}

	// 订单信息
	.orderInfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin: 20rpx auto;

		.ct {
			padding: 10rpx 0;
			font-size: 30rpx;
		}

	}

	//按钮
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -3rpx 10rpx 0rpx rgba(153, 153, 153, 0.1);
		box-sizing: border-box;
		padding: 0 20rpx;
		text-align: center;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		line-height: 60rpx;

		.instant {

			width: 150rpx;
			height: 60rpx;
			background: #6BC665;
			border-radius: 30rpx;
			color: #fff;
		}

		.cancel {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #E6E6E6;
			border-radius: 30rpx;
			color: #333333;
			margin: 0 60rpx;
		}

		.realtaions {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #E6E6E6;
			border-radius: 30rpx;
			color: #666;
			margin: 0 60rpx;
		}

		.commit {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #6BC665;
			border-radius: 30rpx;
			color: #6BC665;
		}
	}
	// 弹出

	.popCommit {
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-sizing: border-box;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		padding: 10rpx 20rpx;

		.titles {
			font-size: 36rpx;
			text-align: center;
			padding: 10rpx 0 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.rates {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
			font-size: 28rpx;

			.rateTitle {
				width: 120rpx;
			}

			.reateSelet {
				width: 400rpx;
			}

			.rateCt {
				width: 80rpx;
			}
		}

		.commentCt {
			border-bottom: 1rpx solid #e6e6e6;

			.title {
				padding: 20rpx 0;
			}

			.Ct {
				width: 650rpx;
				height: 150rpx;
				overflow: hidden;
			}

			.picS {
				display: flex;
				align-items: center;
			}
			.picS .item{
				width: 200rpx;
				height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				overflow: hidden;
				margin: 40rpx 40rpx 40rpx 0;
			}

		}
		.submitBtn{
			width: 690rpx;
			height: 80rpx;
			background: #6BC665;
			border-radius: 40rpx;
			text-align: center;
			margin: 40rpx auto;
			line-height: 80rpx;
			color: #fff;
		}
	}
</style>